<template>
	<!-- 我的简历 -->
	<div class="p-resume">
		<div class="userInfo-head flex-lect">
			<template v-if="resource.headPicture">
				<div class="userInfo-head-photo"><img :src="imgUrl + resource.headPicture" alt="" /></div>
				<dl class="userInfo-head-right flexColumn">
					<!-- 姓名 -->
					<dd class="userInfo-head-name flex-bect">
						<span class="font24">{{resource.userName}}</span>
					</dd>
					<!-- 性别年龄 -->
					<dd> 
						{{resource.sexTxt}}
						<span v-if="resource.sexTxt && resource.birthDate">|</span>
						{{nianl}}{{$t('common.resume.yearsOld')}}（{{resource.birthDate}}）
						<span v-if="resource.birthDate && resource.address">|</span>
						{{$t('common.detail.address')}}：{{resource.address}}
					</dd>
					<!-- 招聘类型 + 联系信息 -->
					<dd class="userInfo-head-info flexItems">
						<!-- {{resource.sexTxt}}
						<span>|</span> -->
						{{resource.telentTypeTxt}}
						<span v-if="resource.telentTypeTxt">|</span>
						{{resource.topUniversity}}
						<span v-if="resource.topUniversity">|</span>
						<span class="contact h33">
							<i class="el-icon-mobile"></i>
							{{resource.phone}}
						</span>
						<span class="contact h33">
							<i class="el-icon-message"></i>
							{{resource.email}}
						</span>
					</dd>
					<!-- 简历完善 -->
				</dl>
			</template>
			
			<template v-else>
				<div class="userInfo-head-photo"><img src="../../assets/images/tx.png" alt="" /></div>
				<div class="userInfo-head-right flexColumn">
					<div class="userInfo-head-name font24 mbt10">{{userInfo.name}}
						<router-link v-if="!resource.userName" to="/vip/p_resume_edit" class="color1 font14 mle10"><i class="el-icon-edit-outline"> {{$t('common.resume.edit')}}</i></router-link>
					</div>
					<div class="userInfo-head-info flexItems mbt10">
						{{userInfo.phone}}
					</div>
					<div class="userInfo-head-speed flexItems">
						<span>{{$t('common.resume.completion')}} 0%</span>
						<router-link to="/vip/p_info" class="wanshanInfo">
							<i class="el-icon-edit-outline"></i>
							{{$t('common.company.improveInfo')}}
						</router-link>
						
					</div>
				</div>
			</template>
		</div>
		<div class="userInfo-content" v-if="resource.headPicture">
			<div class="company-resume-box">
				<div class="zmlTitle">{{$t('common.detail.EssentialInfo')}}</div>
				<div class="company-resume-box-item">
					<p class="price">
						<span class="h66">{{$t('common.detail.salaryRequire')}}：</span>
						{{resource.salaryRangeTxt}}
					</p>
					<span class="info">
						<span class="h66">{{$t('common.company.name')}}：</span>
						{{resource.userName}}
					</span>
					<span class="info">
						<span class="h66">{{$t('common.company.sex')}}：</span>
						{{resource.sexTxt}}
					</span>
					<span class="info">
						<span class="h66">{{$t('common.detail.natureIdentity')}}：</span>
						{{resource.identityPropertiesTxt}}
					</span>
					<span class="info">
						<span class="h66">{{$t('common.detail.house')}}：</span>
						{{resource.domicileNationality}}
					</span>
					<span class="info">
						<span class="h66">{{$t('common.detail.IDNumber')}}：</span>
						{{resource.idNumber}}
					</span>
					<span class="info">
						<span class="h66">{{$t('common.detail.maritalStatus')}}：</span>
						{{resource.marriedTxt}}
					</span>
					<span class="info">
						<span class="h66">{{$t('common.company.phone')}}：</span>
						{{resource.phone}}
					</span>
					<span class="info">
						<span class="h66">{{$t('common.detail.Email')}}：</span>
						{{resource.email}}
					</span>
					<span class="info">
						<span class="h66">{{$t('common.detail.address')}}：</span>
						{{resource.address}}
					</span>
				</div>
			</div>
			<div class="company-resume-box">
				<div class="zmlTitle">{{$t('common.detail.educationalInfo')}}</div>
				<div class="company-resume-box-item">
					<div v-for="(item, idx) in eduInfos" :key="idx" class="company-resume-educa">
						<div class="company-resume-educa-head">
							<strong>{{item.startDate}}-{{item.endDate}}</strong>
							<strong>{{item.schoolName}}</strong>
							<strong>
								{{item.professional}}
								<span>|</span>
								{{item.educationTxt}}
							</strong>
						</div>
						<p>{{item.description}}</p>
					</div>
				</div>
			</div>
			<div class="company-resume-box">
				<div class="zmlTitle">{{$t('common.resume.honorCert')}}</div>
				<div class="company-resume-honor">
					<table>
						<tr>
							<td>{{$t('common.resume.hcName')}}</td>
							<td>{{$t('common.resume.getTime')}}</td>
							<td>{{$t('common.resume.unit')}}</td>
							<td>{{$t('common.resume.attaCert')}}</td>
							<td>{{$t('common.resume.desc')}}</td>
						</tr>
						<!-- <template v-if="qualificationList">
							<tr v-for="(item, idx) in qualificationList" :key="idx" >
							<td>{{item.name}}</td>
							<td>{{item.getTime}}</td>
							<td>{{item.issuedUnit}}</td>
							<td><div class="company-resume-honor-img"></div></td>
							<td>{{item.description}}</td>
						</tr>
						</template> -->
						
					</table>
				</div>
			</div>
			<div class="company-resume-box">
				<div class="zmlTitle">{{$t('common.detail.workExperience')}}</div>
				<div class="company-resume-box-item">
					<div v-for="(item, idx) in workExperiences" :key="idx" class="company-resume-educa">
						<div class="company-resume-educa-head flexBetween">
							<div>
								<strong>{{item.startDate}}-{{item.endDate}}</strong>
								<strong>{{item.company}}</strong>
								<strong>{{item.job}}</strong>
							</div>
							<span>{{item.corporateTypeTxt}} <span v-if="item.corporateTypeTxt && item.industryTxt">|</span> {{item.industryTxt}}</span>
						</div>
						<p>{{item.description}}</p>
					</div>
				</div>
			</div>
			<div class="company-resume-box">
				<div class="zmlTitle">{{$t('common.detail.projectExperience')}}</div>
				<div class="company-resume-box-item">
					<div v-for="(item, idx) in workExperiences" :key="idx" class="company-resume-educa">
						<div class="company-resume-educa-head flexBetween">
							<div>
								<strong>{{item.startDate}}-{{item.endDate}}</strong>
								<strong>{{item.projectName}}</strong>
							</div>
							<span>{{item.company}}</span>
						</div>
						<p>{{item.description}}</p>
					</div>
				</div>
			</div>
			<div class="company-resume-box">
				<div class="zmlTitle">{{$t('common.detail.attachmentResume')}}</div>
				<div class="company-resume-upload">
					<div class="jianliList"></div>
					<!-- <div v-if="resource.attachmentList != null">{{resource.attachmentList[0].name}}</div>
					<div v-else>{{$t('common.resume.noAtta')}}</div> -->
				</div>
			</div>
		</div>
		<div class="tipBox" v-else>您还没有填写简历~</div>
	</div>
</template>
<script>
import { ajax, showToast, ajaxAdd,ajaxBackAdd } from '@/utils/js.js';
import { getResumeDetail, styleList } from '@/services/api.js';
const log = console.log;

export default {
	data() {
		return {
			imgUrl: this.$store.state.imgUrl,
			resource: '',
			eduInfos: [],
			projectExps: [],
			qualificationList: [],
			workExperiences: [],
			userInfo:this.$store.state.userInfo,
			nianl:'',
			/*
			salaryOptions: [],
			sexOptions: [],
			natureOptions: [], //身份性质
			marryOptions: [],
			eduOptions: [],
			industryOptions: [], //行业
			companyOptions: [], //公司性质
			*/
		};
	},
	mounted() {
		this.content();
		console.log(this.$route.query)
	},
	watch: {
		'$i18n.locale'() {
			this.content();
		}
	},
	methods: {
		content() {
			//简历详情
			ajaxBackAdd(this, getResumeDetail, {userId:this.$route.query.id}, res => {
				//基本信息
				if (res.data.resource && Object.getOwnPropertyNames(res.data.resource).length > 0) {
					this.resource = res.data.resource;
					if(res.data.resource.birthDate){
						log('.....',new Date().getFullYear())
						this.nianl = parseInt(new Date().getFullYear()) -parseInt(res.data.resource.birthDate.substr(0,4))
					}
					
				}
				this.eduInfos = res.data.eduInfos
				this.projectExps = res.data.projectExps
				this.qualificationList = res.data.qualificationList
				this.workExperiences = res.data.workExperiences
			});
			
			/*
			// 薪资范围
			ajax(this, styleList, { lxjp: 'salaryRange' }, res => {
				this.salaryOptions = res.data;
			})
			
			//性别
			ajax(this, styleList, { lxjp: 'sex' }, res => {
				this.sexOptions = res.data;
			})
			
			//身份性质
			ajax(this, styleList, { lxjp: 'IDENTITY_PROPERTIES' }, res => {
				this.natureOptions = res.data;
			})
			
			//婚姻
			ajax(this, styleList, { lxjp: 'married' }, res => {
				this.marryOptions = res.data;
			})
			
			//学历
			ajax(this, styleList, { lxjp: "education" }, (res) => {
				this.eduOptions = res.data;
			});
			
			//公司性质
			ajax(this, styleList, { lxjp: "corporateType" }, (res) => {
				this.companyOptions = res.data;
			});
			
			//行业
			ajax(this, styleList, { lxjp: "industry" }, (res) => {
				this.industryOptions = res.data;
			});
			*/
		}
	}
};
</script>
<style lang="scss">
.userInfo-content {
	width: 100%;
	height: auto;
	margin-top: 20px;
	background-color: #fff;
	padding: 30px;
	.company-resume-head {
		padding: 30px 0;
		.company-resume-photo {
			width: 100px;
			height: 134px;
			overflow: hidden;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.company-resume-right {
			flex: 1;
			padding-left: 28px;
			.name {
				margin-bottom: 18px;
			}
			p {
				margin-bottom: 12px;
				span {
					margin: 0 10px;
					color: #999;
				}
				.contact {
					margin-left: 0;
					margin-right: 30px;
					color: #333;
					i {
						margin-right: 8px;
					}
				}
			}
		}
	}

	.company-resume-box {
		width: 100%;
		padding-bottom: 30px;
		border-top: 1px solid #d6d7dc;
		.company-resume-box-item {
			padding-left: 17px;
			.price {
				margin: 6px 0;
			}
			.info {
				display: inline-block;
				width: 30%;
				margin: 6px 0;
			}
			.company-resume-educa {
				margin-bottom: 24px;
				.company-resume-educa-head {
					margin-bottom: 12px;
					strong {
						margin-right: 70px;
					}
				}
				p {
					line-height: 22px;
					color: #666;
				}
			}
			.company-resume-educa:nth-last-of-type(1) {
				margin-bottom: 0;
			}
		}
		.company-resume-honor {
			table {
				width: 100%;
				text-align: center;
				tr {
					border: 1px solid #ededed;
					td {
						padding: 15px 30px;
					}
				}
				tr:nth-of-type(1) {
					height: 40px;
					background-color: #f2f6fe;
					td:nth-last-of-type(1) {
						width: 230px;
					}
				}

				.company-resume-honor-img {
					width: 60px;
					height: 76px;
					background-color: #d1d1d1;
					margin: auto;
				}
			}
		}
		.company-resume-upload {
			background-color: #fafafa;
			padding: 20px 30px;
			.company-resume-upload-item {
				margin-bottom: 10px;
				span {
					margin: 0 48px 0 10px;
				}
			}
			.company-resume-upload-item:nth-last-of-type(1) {
				margin-bottom: 0;
			}
		}
	}
}
</style>
